<template>
  <div>
    <el-container>
      <el-aside width="400px">
        <el-image
          style="width: 300px; height: 300px; margin: 100px 50px 10px 50px"
          :src="url"
          fit="fill"
        ></el-image>
        <el-upload
          class="upload-demo"
          action="http://8.130.52.6:8091/api/company/auth/uploadFace"
          :on-success="handleAvatarSuccess"
          :show-file-list="false"
        >
          <el-button size="small" style="margin-left: 150px" type="primary"
            >点击上传</el-button
          >
        </el-upload>
        <el-button
          size="small"
          style="margin: 10px 0 0 140px"
          :disabled="edit"
          type="primary"
          @click="editImage"
          >确认修改头像</el-button
        >
      </el-aside>

      <el-main>
        <el-descriptions
          direction="vertical"
          class="margin-top"
          title="个人信息"
          :column="3"
          border
        >
          <!-- <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-key"></i>
                密码
              </template>
              <div style="display: flex; align-items: center">
                <template v-if="!showPassword">{{
                  info.password.replace(/./g, "*")
                }}</template>
                <template v-else>{{ info.password }}</template>
                <div style="margin-left: 10px">
                  <el-button
                    icon="el-icon-lock"
                    circle
                    v-if="!showPassword"
                    size="mini"
                    @click="toggleShowPassword"
                    :border="false"
                  >
                  </el-button>
                  <el-button
                    v-else
                    icon="el-icon-view"
                    circle
                    size="mini"
                    @click="toggleShowPassword"
                    :border="false"
                  >
                  </el-button>
                </div>
              </div>
            </el-descriptions-item> -->

          <!-- <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-circle-check"></i>
                注册时间
              </template>
              {{ info.regtime }}
            </el-descriptions-item>
  
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-date"></i>
                更新时间
              </template>
              {{ info.updated }}
            </el-descriptions-item> -->

          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-info"></i>
              公司用户ID
            </template>
            {{ info.companyUserId }}
          </el-descriptions-item>

          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-user"></i>
              姓名
            </template>
            {{ info.name }}
          </el-descriptions-item>

          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-user-solid"></i>
              身份类型
            </template>
            <el-tag type="danger" v-if="info.type == 'ADMIN'">管理员</el-tag>
            <el-tag type="warning" v-else-if="info.type == 'CALL'">客服</el-tag>
            <el-tag type="warning" v-else-if="info.type == 'STAFF'"
              >普通员工</el-tag
            >
            <!-- {{ info.type }} -->
          </el-descriptions-item>

          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-money"></i>
              薪资
            </template>
            {{ info.salary }}
          </el-descriptions-item>

          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-phone"></i>
              联系电话
            </template>
            {{ info.phone }}
          </el-descriptions-item>

          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-s-order"></i>
              服务标签
            </template>
            <el-tag type="success"> {{ getServiceName(info.labelId) }}</el-tag>
          </el-descriptions-item>

          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-message"></i>
              邮箱
            </template>
            {{ info.email }}
          </el-descriptions-item>

          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-sunny"></i>
              出生日期
            </template>
            {{ formatDate(info.birth) }}
          </el-descriptions-item>

          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-male"></i>
              性别
            </template>
            <el-tag type="info" v-if="info.sex == 'SECRET'">保密</el-tag>
            <el-tag type="" v-if="info.sex == 'MAN'">男性</el-tag>
            <el-tag type="danger" v-if="info.sex == 'WOMAN'">女性</el-tag>
            <!-- {{ info.sex }} -->
          </el-descriptions-item>

          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-s-home"></i>
              居住地址
            </template>
            {{ info.address }}
          </el-descriptions-item>

          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-loading"></i>
              状态
            </template>
            <el-tag type="danger" v-if="info.status == 'DELETE'">删除</el-tag>
            <el-tag type="warning" v-else-if="info.status == 'BAN'"
              >禁用</el-tag
            >
            <el-tag type="" v-else-if="info.status == 'NORMAL'">正常</el-tag>
            <!-- {{ info.status }} -->
          </el-descriptions-item>
        </el-descriptions>
      </el-main>

      <el-dialog
        title="个人信息"
        :visible.sync="MessageEditDialogVisible"
        width="35%"
      >
        <span>
          <el-card class="filter-container" shadow="never">
            <div style="margin-top: 15px">
              <el-form
                :rules="editMessageRules"
                ref="editMessage"
                :inline="true"
                :model="editMessage"
                size="small"
                label-width="140px"
              >
                <el-form-item label="地址:" prop="address">
                  <el-input
                    style="width: 203px"
                    v-model="editMessage.address"
                    placeholder="请输入地址"
                    clearable
                  ></el-input>
                </el-form-item>
                <el-form-item label="电子邮件:" prop="email">
                  <el-input
                    style="width: 203px"
                    v-model="editMessage.email"
                    placeholder="请输入邮件"
                    clearable
                  ></el-input>
                </el-form-item>
                <el-form-item label="电话号码:" prop="phone">
                  <el-input
                    style="width: 203px"
                    v-model="editMessage.phone"
                    placeholder="请输入电话号码"
                    clearable
                  ></el-input>
                </el-form-item>
              </el-form>
            </div>
          </el-card>
        </span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="MessageEditDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="handleEditMessage()"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </el-container>
    <el-button
      style="float: right; margin-right: 15px"
      @click="(MessageEditDialogVisible = true), showeditMessage()"
      size="small"
      type="success"
    >
      修改个人信息
    </el-button>
  </div>
</template>

<script>
import moment from "moment";
export default {
  name: "MyInfo",
  data() {
    return {
      showPassword: false,
      url: "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
      info: {
        id: "",
        companyUserId: "",
        company: {},
        labelId: "",
        type: "",
        salary: "",
        email: "",
        password: "",
        name: "",
        sex: "",
        birth: "",
        phone: "",
        address: "",
        faceUrl: "",
        status: "",
        createTime: "",
        updateTime: "",
      },
      editMessage: {
        address: "",
        email: "",
        faceUrl: "",
        phone: "",
      },
      serviceNameOptions: [{ name: "", id: "", status: "" }],
      editMessageRules: {
        address: [
          { required: true, message: "请输入地址", trigger: "blur" },
          { min: 2, message: "地址至少包含两个字符", trigger: "blur" },
        ],
        email: [
          { required: true, message: "请输入邮件地址", trigger: "blur" },
          {
            type: "email",
            message: "请输入有效的电子邮件地址",
            trigger: ["blur", "change"],
          },
        ],
        phone: [
          { required: true, message: "请输入电话号码", trigger: "blur" },
          { len: 11, message: "请输入 11 位电话号码", trigger: "blur" },
        ],
      },
      MessageEditDialogVisible: false,
      edit: false,
      listLoading: false,
    };
  },
  created() {
    this.getinfo();
    this.getserviceNameOptions();
  },
  computed: {
    // 计算属性：将服务标签ID转换为对应的服务名称
    getServiceName() {
      return (labelId) => {
        const matchingService = this.serviceNameOptions.find(
          (service) => service.id == labelId
        );
        return matchingService ? matchingService.name : "";
      };
    },
  },
  methods: {
    getinfo() {
      this.listLoading = true;
      this.axios
        .get("/api/company/auth/user/getInfo")
        .then((response) => {
          console.log(response);
          if (response.data.code == "200") {
            this.info = response.data.value;
            console.log(this.info);
          } else {
            this.$message.error(response.data.message);
          }
          this.listLoading = false;
        })
        .catch((error) => {
          this.message.error("无法获取数据");
          this.listLoading = false;
        });
    },
    formatDate(timestamp) {
      // return moment(timestamp).format("YYYY-MM-DD HH:mm:ss"); // 使用 moment.js 格式化日期时间字符串
      return moment(timestamp).format("YYYY-MM-DD"); // 使用 moment.js 格式化日期时间字符串
    },
    // 获取服务列表
    getserviceNameOptions() {
      this.axios
        .get("api/company/auth/label/list")
        .then((response) => {
          if (response.data.code == "200") {
            // this.ServiceList = response.data.value.data;
            this.serviceNameOptions = response.data.value;
            this.serviceNameOptions = this.serviceNameOptions.filter(function (
              item
            ) {
              if (item.status == "NORMAL") return item;
            });
            // console.log(response);
          } else {
            this.$message.error(response.data.message);
          }
          // this.listLoading = false;
        })
        .catch((error) => {
          this.message.error("无法获取数据");
          this.listLoading = false;
        });
    },
    showeditMessage() {
      this.editMessage = { ...this.info };
    },
    // 修改
    handleEditMessage() {
      // companyUserId
      this.$refs.editMessage.validate((valid) => {
        if (valid) {
          this.$confirm("请再次确认是否选择修改").then(() => {
            this.axios
              .post(
                "/api/company/auth/user/updateInfo?address=" +
                  this.editMessage.address +
                  "&email=" +
                  this.editMessage.email +
                  "&faceUrl=" +
                  this.editMessage.faceUrl +
                  "&phone=" +
                  this.editMessage.phone
              )
              .then((response) => {
                if (response.data.code == "200") {
                  this.$message({
                    message: "修改成功",
                    type: "success",
                  });
                  this.getinfo();
                  this.MessageEditDialogVisible = false;
                } else {
                  this.$message.error(response.data.message);
                }
              })
              .catch((error) => {
                this.$message.error("修改失败");
              });
          });
        } else {
          this.$message.error("请按照要求填写信息");
        }
      });
    },
    // toggleShowPassword() {
    //   this.showPassword = !this.showPassword;
    // },
    // handleAvatarSuccess(res, file) {
    //   this.imageUrl = URL.createObjectURL(file.raw);
    // },
    // beforeAvatarUpload(file) {
    //   const isJPG = file.type === "image/jpeg";
    //   const isLt2M = file.size / 1024 / 1024 < 2;

    //   if (!isJPG) {
    //     this.$message.error("上传头像图片只能是 JPG 格式!");
    //   }
    //   if (!isLt2M) {
    //     this.$message.error("上传头像图片大小不能超过 2MB!");
    //   }
    //   return isJPG && isLt2M;
    // },
    handleAvatarSuccess(res) {
      if (res.code != "200") {
        this.$message.error("文件格式不支持");
      } else {
        this.$message({
          message: "上传成功",
          type: "success",
        });
        this.url = res.value;
        this.edit = false;
      }
    },
    editImage() {
      this.axios
        .post("/api/company/auth/user/updateInfo?faceUrl=" + this.url)
        .then((response) => {
          if (response.data.code == "200") {
            this.$message({
              message: "修改成功",
              type: "success",
            });
            this.edit = true;
          } else {
            this.$message.error(response.data.message);
          }
        })
        .catch((error) => {
          this.$message.error("修改失败");
        });
    },
    // editImage() {
    // this.axios
    //   .post("api/user/updateImage?imageUrl=" + this.url)
    //   .then((response) => {
    //     if (response.data.code == "200") {
    //       this.$message({
    //         message: "修改成功",
    //         type: "success",
    //       });
    //       this.edit = true;
    //     } else {
    //       this.$message.error(response.data.message);
    //     }
    //   })
    //   .catch((error) => {
    //     this.$message.error("修改失败");
    //   });
    // },
    handleAvatarSuccess(res) {
      // if (res.code != "200") {
      //   this.$message.error("文件格式不支持");
      // } else {
      //   this.$message({
      //     message: "上传成功",
      //     type: "success",
      //   });
      //   this.url = res.value;
      //   this.edit = false;
      // }
    },
  },
};
</script>
